<template>
  <div class="activity-intro">
    <div class="title">
      <h1>活动精选</h1>
      <p class="subtitle">探索独特体验，创造难忘回忆</p>
    </div>
    <div class="content">
      <div
          class="section"
          v-for="(activity, index) in activities"
          :key="index"
          :style="{'--delay': index * 0.1 + 's'}"
      >
        <div class="section-content">
          <div class="image-container">
            <img
                :src="activity.image"
                :alt="activity.title"
                class="activity-image"
            >
            <div class="image-overlay"></div>
          </div>
          <div class="text">
            <h2>{{ activity.title }}</h2>
            <div class="divider"></div>
            <p>{{ activity.description }}</p>
            <router-link
                :to="activity.link"
                class="button"
            >
              <span>了解更多</span>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import image12 from '../../assets/12.jpg'
import image13 from '../../assets/13.jpg'
import image14 from '../../assets/14.jpg'

export default {
  name: 'ActivityIntro',
  data() {
    return {
      activities: [
        {
          title: '特色讲谈',
          image: image12,
          description: '在这里，我们将邀请各领域的专家学者，围绕热门话题展开深入探讨。无论是前沿科技的最新动态，还是文化艺术的深度解读，都能在这里找到精彩的观点碰撞。听众不仅能拓宽视野，还能与嘉宾互动交流，共同探索知识的奥秘。',
          link: '/allpart/SpecialTalk'
        },
        {
          title: '户外策划',
          image: image14,
          description: '想要一场难忘的户外活动？我们的专业团队将为你量身定制。从徒步旅行到露营探险，从团队拓展到亲子活动，我们都能提供全方位的策划服务。精心挑选的场地、周到的安全保障、丰富的活动安排，让你的户外之旅充满乐趣与惊喜。',
          link: '/allpart/Outpart'
        },
        {
          title: '主题晚宴',
          image: image13,
          description: '一场精心打造的主题晚宴，将为你带来独特的用餐体验。根据不同的主题，我们会布置相应的场景，营造出浪漫、庄重或欢乐的氛围。精致的美食、优雅的音乐、贴心的服务，让你在享受美食的同时，也能沉浸在美好的氛围之中。',
          link: '/allpart/Foodpart'
        }
      ]
    }
  }
}
</script>

<style scoped>
.activity-intro {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
  padding: 60px 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

.title {
  background: white;
  padding: 30px 40px;
  margin-bottom: 40px;
  width: 80%;
  max-width: 800px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  text-align: center;
  transform: translateY(-20px);
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
}

h1 {
  font-size: 2.5rem;
  margin: 0;
  color: #2c3e50;
  font-weight: 600;
  letter-spacing: 1px;
}

.subtitle {
  font-size: 1.1rem;
  color: #7f8c8d;
  margin-top: 10px;
  font-weight: 300;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
}

.section {
  background: white;
  padding: 0;
  margin-bottom: 30px;
  width: 80%;
  max-width: 900px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  overflow: hidden;
  transform: translateY(20px);
  opacity: 0;
  animation: fadeInUp 0.6s ease-out var(--delay) forwards;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.section-content {
  display: flex;
  height: 100%;
}

.image-container {
  position: relative;
  width: 45%;
  min-height: 300px;
  overflow: hidden;
}

.activity-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);
}

.section:hover .activity-image {
  transform: scale(1.05);
}

.text {
  padding: 30px;
  width: 55%;
}

.text h2 {
  font-size: 1.8rem;
  margin: 0 0 15px 0;
  color: #2c3e50;
  font-weight: 600;
}

.divider {
  height: 3px;
  width: 60px;
  background: linear-gradient(to right, #3498db, #9b59b6);
  margin: 0 0 20px 0;
  border-radius: 3px;
}

.text p {
  line-height: 1.8;
  margin: 0 0 25px 0;
  color: #555;
  font-size: 1rem;
}

.button {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(to right, #3498db, #9b59b6);
  color: white;
  padding: 12px 25px;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.button svg {
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}

.button:hover svg {
  transform: translateX(3px);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .title {
    width: 90%;
    padding: 25px;
  }

  .section {
    width: 90%;
    flex-direction: column;
  }

  .section-content {
    flex-direction: column;
  }

  .image-container {
    width: 100%;
    height: 250px;
  }

  .text {
    width: 100%;
    padding: 25px;
  }

  h1 {
    font-size: 2rem;
  }

  .subtitle {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .activity-intro {
    padding: 40px 15px;
  }

  .text {
    padding: 20px;
  }

  .text h2 {
    font-size: 1.5rem;
  }

  .button {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
}
</style>